<template>
<div class="goodsListSKU">
  <div class="sku-search">
    <span>货号：{{productSn}}</span>
    <el-input placeholder="按sku搜索" v-model="model.skuCode" class="input-with-select" @keyup.native.enter="refreshTable">
      <el-button slot="append" icon="el-icon-search" @click="refreshTable(true)"></el-button>
    </el-input>
  </div>
  <y-table
    v-if="productId && initTable"
    border
    :get-data-way="{data: tableData}"
    :columns="columns">
<!--    <el-table-column slot="skuCode" label="SKU编码" align="center" header-align="center">
      <template v-slot="{row}">
        <el-input v-if="row.edit" v-model="row.skuCode" size="mini"></el-input>
        <span v-else>{{row.skuCode}}</span>
      </template>
    </el-table-column>-->
    <el-table-column slot="price" label="价格" align="center" header-align="center" width="100">
      <template v-slot="{row}">
        <el-input-number v-if="row.edit" :controls="false" v-model="row.price" size="mini"></el-input-number>
        <span v-else>{{row.price}}</span>
      </template>
    </el-table-column>
    <el-table-column slot="stock" label="库存" align="center" header-align="center" width="100">
      <template v-slot="{row}">
        <el-input-number v-if="row.edit" step-strictly :controls="false" v-model="row.stock" size="mini"></el-input-number>
        <span v-else>{{row.stock}}</span>
      </template>
    </el-table-column>
    <el-table-column slot="lowStock" label="预警库存" align="center" header-align="center" width="100">
      <template v-slot="{row}">
        <el-input-number v-if="row.edit" step-strictly :controls="false" v-model="row.lowStock" size="mini"></el-input-number>
        <span v-else>{{row.lowStock}}</span>
      </template>
    </el-table-column>
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" :width="isPublish ? 80 : 140">
      <template v-slot="{row}">
        <div class="table-buttons">
          <template v-if="!row.edit">
            <el-button type="primary" size="mini" @click="editSku(row)">编辑</el-button>
          </template>
          <template v-else>
            <el-button type="primary" size="mini" @click="saveSku(row)">保存</el-button>
<!--            <el-button size="mini" @click="cancelSku(row)">取消</el-button>-->
          </template>
          <el-popconfirm
            v-if="!isPublish"
            title="是否确认删除该条数据？"
            @confirm="delSku(row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </y-table>
</div>
</template>

<script>
export default {
  name: "goodsListSKU",
  props:{
    productId: String,
    productSn: String,
    isPublish: Boolean,
    visible: Boolean
  },
  data(){
    return{
      model:{
        skuCode: ''
      },
      tableData: [],
      columns: [],
      editing: null,
      initTable: false,
    }
  },
  methods:{
    editSku(row){
      if(!this.editing){
        this.editing = row;
        this.$set(row, 'edit', true);
      }else{
        this.$alert('存在其他正在编辑未保存的数据，请先保存其他数据再编辑本条数据', {
          confirmButtonText: '确定'
        });
      }
    },
    cancelSku(row){
      this.editing = null;
      this.$set(row, 'edit', false);
    },
    saveSku(row){
      this.$yAxios({
        url: this.$api.goods.updateSku,
        data: row,
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.refreshTable();
      })
    },
    delSku(row){
      this.$yAxios({
        url: this.$api.goods.removeSku,
        data:{
          id: row.id
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.refreshTable();
      })
    },
    refreshTable(search){
      this.$yAxios({
        url: this.$api.goods.searchSku,
        data:{
          productId: this.productId,
          skuCode: search ? this.model.skuCode : ''
        },
        loading: true,
      }, info => {
        this.editing = null;
        this.tableData = info.record.map(item => {
          this.$set(item, 'edit', false);
          return item;
        });
      });
    },
    createTable(){
      this.$set(this, 'columns', [])
      this.$yAxios({
        url: this.$api.goods.searchSku,
        data:{
          productId: this.productId,
          skuCode: ''
        },
        loading: true,
      }, info => {
        this.columns.push({
          label: 'SKU编码',
          prop: 'skuCode',
          //template: true
        }, ...info.table, ...[{
          label: '售价',
          prop: 'price',
          template: true
        },{
          label: '库存',
          prop: 'stock',
          template: true
        },{
          label: '预警库存',
          prop: 'lowStock',
          template: true
        }]);
        this.editing = null;
        this.tableData = info.record.map(item => {
          this.$set(item, 'edit', false);
          return item;
        });
        this.initTable = true;
      })
    }
  },
  watch:{
    'productId':{
      handler(val){
        if(val && this.visible){
          this.initTable = false;
          this.createTable();
        }
      },
      immediate: true
    }
  }
}
</script>

<style scoped lang="less">
.goodsListSKU{
  .sku-search{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    >*{
      width: 50%;
    }
  }
  /deep/ .el-input-number{
    width: 100%;
  }
}
</style>